<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head_and_imports">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="Start your development with a Dashboard for Bootstrap 4.">
	<meta name="author" content="Creative Tim">
	<title>T4M</title>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
	<link rel="stylesheet" th:href="@{/assets/plugins/fontawesome/css/all.min.css}" type="text/css">
	<link rel="stylesheet" th:href="@{/assets/plugins/argon/argon.min.css}" type="text/css">
	<link rel="stylesheet" th:href="@{/assets/plugins/highlight/default.css}">
	<link rel="stylesheet" th:href="@{/assets/plugins/bootstrap-table/bootstrap-table.min.css}">
	<link rel="stylesheet"
	      th:href="@{/assets/plugins/bootstrap-table/fixed-columns/bootstrap-table-fixed-columns.min.css}">
	<link rel="stylesheet" th:href="@{/assets/plugins/bootstrap-table/group-by-v2/bootstrap-table-group-by.min.css}">
	<link rel="stylesheet" th:href="@{/assets/css/common.css}">
	
	<script th:src="@{/assets/plugins/echart/echarts.min.js}"></script>
	<script th:src="@{/assets/plugins/vue/vue.js}"></script>
</head>
<body>
<nav th:fragment="sidnav(selectedElementID)"
     class="sidenav navbar navbar-vertical  fixed-left  navbar-expand-xs navbar-light bg-white"
     id="sidenav-main">
	<div class="scrollbar-inner">
		<!-- Brand -->
		<div class="sidenav-header  align-items-center">
			<a class="navbar-brand" th:href="@{/dashboard/basic}">
				<h1>t4m</h1>
			</a>
		</div>
		<div class="navbar-inner">
			<!-- Collapse -->
			<div class="collapse navbar-collapse" id="sidenav-collapse-main">
				
				<!-- Heading -->
				<h6 class="navbar-heading p-0 text-muted">
					<span class="docs-normal">Operation</span>
				</h6>
				<!-- Nav items -->
				<ul class="navbar-nav px-2">
					<li class="nav-item">
						<button id="scan_current_project_btn" type="button" data-toggle="modal"
						        data-target="#modal_to_scan_project"
						        class="col-auto btn btn-block btn-outline-primary text-uppercase"
						        onclick="showScanModal('scan')">
							<span class="btn-inner--icon"><i class="fas fa-search-plus"></i></span>
							<span class="btn-inner--text">Scan</span>
						</button>
						<div class="btn-group btn-block" role="group" aria-label="New project">
							<button id="new_project_btn" type="button" class="col-auto btn btn-outline-default text-uppercase"
							        onclick="showScanModal('new')" data-toggle="modal" data-target="#modal_to_scan_project">
								<span class="btn-inner--icon"><i class="fas fa-plus"></i></span>
								<span class="btn-inner--text">New</span>
							</button>
							<button id="switch_project_btn" type="button" class="col-auto btn btn-outline-default text-uppercase"
							        data-toggle="modal" data-target="#modal_to_switch_project">
								<span class="btn-inner--icon"><i class="fas fa-exchange-alt"></i></span>
								<span class="btn-inner--text">Switch</span>
							</button>
						</div>
					</li>
				</ul>
				
				<!-- Divider -->
				<hr class="my-3">
				
				<!-- Heading -->
				<h6 class="navbar-heading p-0 text-muted">
					<span class="docs-normal">Dashboard</span>
				</h6>
				<!-- Nav items -->
				<ul class="navbar-nav">
					<li class="nav-item">
						<a class="nav-link" th:classappend="${selectedElementID==0}?'active':''" href="/dashboard/basic">
							<i class="fas fa-desktop"></i>
							<span class="nav-link-text">Basic</span>
						</a>
					</li>
				</ul>
				<ul class="navbar-nav">
					<li class="nav-item">
						<a class="nav-link" th:classappend="${selectedElementID==1}?'active':''" href="/dashboard/sloc">
							<i class="fas fa-stream"></i>
							<span class="nav-link-text">Lines of Code</span>
						</a>
					</li>
				</ul>
				<ul class="navbar-nav">
					<li class="nav-item">
						<a class="nav-link" th:classappend="${selectedElementID==2}?'active':''" href="/dashboard/complexity">
							<i class="fas fa-circle-notch"></i>
							<span class="nav-link-text">Complexity</span>
						</a>
					</li>
				</ul>
				<ul class="navbar-nav">
					<li class="nav-item">
						<a class="nav-link" th:classappend="${selectedElementID==3}?'active':''" href="/dashboard/coupling">
							<i class="far fa-object-ungroup"></i>
							<span class="nav-link-text">Coupling</span>
						</a>
					</li>
				</ul>
				<ul class="navbar-nav">
					<li class="nav-item">
						<a class="nav-link" th:classappend="${selectedElementID==4}?'active':''" href="/dashboard/inheritance">
							<i class="fab fa-sourcetree"></i>
							<span class="nav-link-text">Inheritance</span>
						</a>
					</li>
				</ul>
				<ul class="navbar-nav">
					<li class="nav-item">
						<a class="nav-link" th:classappend="${selectedElementID==5}?'active':''" href="/dashboard/cohesion">
							<i class="fas fa-columns"></i>
							<span class="nav-link-text">Cohesion</span>
						</a>
					</li>
				</ul>
				
				<!-- Divider -->
				<hr class="my-3">
				
				<!-- Heading -->
				<h6 class="navbar-heading p-0 text-muted">
					<span class="docs-normal">Documentation</span>
				</h6>
				<!-- Navigation -->
				<ul class="navbar-nav">
					<li class="nav-item">
						<a class="nav-link" th:classappend="${selectedElementID==6}?'active':''" href="/document/introduction">
							<i class="fas fa-info"></i>
							<span class="nav-link-text">Introduction</span>
						</a>
					</li>
				</ul>
				<ul class="navbar-nav">
					<li class="nav-item">
						<a class="nav-link" th:classappend="${selectedElementID==7}?'active':''" href="/document/how-to-use">
							<i class="fas fa-book-open"></i>
							<span class="nav-link-text">How to use</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</nav>

<modal th:fragment="modals">
	<!-- Modal to create new project -->
	<div class="modal fade" id="modal_to_scan_project" tabindex="-1" role="dialog"
	     aria-labelledby="modal_to_scan_project_label" aria-hidden="true"
	     style="cursor: pointer">
		<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="modal_to_scan_project_label" v-html="title"></h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<form>
						<div class="form-group" v-html="projectNameHTML"></div>
						<div class="form-group">
							<div class="custom-control justify-content-between mb-2 pl-0">
								<label class="custom-label">Custom date and time</label>
								<div class="custom-control custom-checkbox float-right">
									<input type="checkbox" class="custom-control-input" id="enable_project_create_time">
									<label class="custom-control-label" for="enable_project_create_time">Enable</label>
								</div>
							</div>
							<div class="input-group">
								<div class="input-group-prepend">
									<span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
								</div>
								<input class="form-control" type="text" id="project_create_time" disabled/>
							</div>
						</div>
						<div class="form-group">
							<label for="excluded_path">Excluded path</label>
							<textarea class="form-control" id="excluded_path" rows="2">{{modalFlag==='scan'?projectExcludedPath:defaultExcludedPath}}</textarea>
							<small class="form-text text-muted">
								The path that should not be included in scanning.
							</small>
							<small class="form-text text-muted">
								Each path should start with your system file separator (<code>/</code> for Mac, <code>\</code>for
								Windows), and separated by <code>;</code>
							</small>
						</div>
						<div class="form-group">
							<label for="dependency_path">Dependency path</label>
							<textarea class="form-control" id="dependency_path" rows="2">{{modalFlag==='scan'?projectDependencyPath:defaultDependencyPath}}</textarea>
							<small class="form-text text-muted">
								The external paths of <code>.jar</code> files of your project.
							</small>
							<small class="form-text text-muted">
								The external classes can not be resolved if lacking relevant classpaths, leading some extends of
								inaccuracy to the metrics.
							</small>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary" onclick="scanProject(this)">Scan</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- Modal to switch and delete project -->
	<div class="modal fade" id="modal_to_switch_project" tabindex="-1" role="dialog"
	     aria-labelledby="modal_to_switch_project_label" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="modal_to_switch_project_label">Switch project</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div id="model_content_of_switching_project" class="modal-body">
					<div class="list-group list-group-flush" id="project_list_for_switch">
						<a href="javascript:void(0);" class="list-group-item py-2 list-group-item-action"
						   v-for="identifier of projectArray" v-bind:class="identifier[0] === currentProject?'active':''"
						   v-html="identifier[1]" data-toggle="list" v-bind:name="identifier[0]">
						</a>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-outline-danger" onclick="deleteProject()">Delete</button>
					<button type="button" class="btn btn-primary" onclick="switchProject()">Choose</button>
				</div>
			</div>
		</div>
	</div>
</modal>

<footer th:fragment="footer" class="footer pt-0">
	<div class="row align-items-center justify-content-lg-between">
		<div class="col-lg-6">
			<div class="copyright text-center  text-lg-left  text-muted">
				&copy; 2020 Yuxiang Liao
			</div>
		</div>
		<div class="col-lg-6">
			<ul class="nav nav-footer justify-content-center justify-content-lg-end">
				<li class="nav-item">
					<a href="https://github.com/liaoooyx/t4m" class="nav-link" target="_blank">Github</a>
				</li>
				<li class="nav-item">
					<a href="https://liaoooyx.com/about/" class="nav-link" target="_blank">About Me</a>
				</li>
				<li class="nav-item">
					<a href="https://github.com/liaoooyx/t4m/LICENSE.md" class="nav-link"
					   target="_blank">MIT License</a>
				</li>
			</ul>
		</div>
	</div>
</footer>

<imports th:fragment="footer_imports">
	<!-- Argon Scripts -->
	<!-- Core -->
	<script th:src="@{/assets/plugins/jquery/jquery.min.js}"></script>
	<script th:src="@{/assets/plugins/jquery/jquery.scrollbar.min.js}"></script>
	<script th:src="@{/assets/plugins/jquery/jquery-scrollLock.min.js}"></script>
	<script th:src="@{/assets/plugins/bootstrap/bootstrap.bundle.min.js}"></script>
	<script th:src="@{/assets/plugins/cookie/js.cookie.js}"></script>
	<!--laydate-->
	<script th:src="@{/assets/plugins/laydate/laydate.js}"></script>
	<!--highlight-->
	<script th:src="@{/assets/plugins/highlight/highlight.pack.js}"></script>
	<!-- Bootstrap-table -->
	<script th:src="@{/assets/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
	<script th:src="@{/assets/plugins/bootstrap-table/fixed-columns/bootstrap-table-fixed-columns.min.js}"></script>
	<!-- Argon JS -->
	<script th:src="@{/assets/plugins/argon/argon.min.js}"></script>
	<!--common.js-->
	<script th:src="@{/assets/js/common.js}"></script>
	
	<script th:inline="javascript">
      var triggerBtn = [[${triggerBtn}]];
      var disableScan = [[${disableScan}]];
      let currentProjectPath = [[${currentProjectPath}]];

      $(function () {
          laydate.render({
              elem: '#project_create_time',
              lang: 'en', type: 'datetime', theme: '#5e72e4',
          });
          if (triggerBtn === "new") {
              $("#new_project_btn").trigger("click");
          } else if (triggerBtn === "switch") {
              $("#switch_project_btn").trigger("click");
          }
          if (disableScan) {
              $('#scan_current_project_btn').attr("disabled", "");
          }
      })

      let scan_vm = new Vue({
          el: '#modal_to_scan_project',
          data: {
              modalFlag: '',
              title: '',
              projectNameHTML: '',
              projectExcludedPath: [[${projectExcludedPath}]],
              projectDependencyPath: [[${projectDependencyPath}]],
              defaultExcludedPath: [[${defaultExcludedPath}]],
              defaultDependencyPath: [[${defaultDependencyPath}]],
          }
      })

      let scanType;

      function showScanModal(flag) {
          scanType = flag;
          scan_vm.modalFlag = flag
          if (flag === "new") {
              let html = '<label for="project_path">Project path <span class="text-red">*</span></label>\n' +
                  '<input type="text" class="form-control" id="project_path" ' +
                  'placeholder="Please enter your project absolute root path." required>\n' +
                  '<div class="invalid-feedback">Please enter a project path.</div>'
              scan_vm.projectNameHTML = html;
              scan_vm.title = 'Scan New Project';
              $('#modal_to_scan_project').modal('show');
          } else if (flag === "scan") {
              let html = '<label for="project_path">Project path <span class="text-red">*</span></label>\n' +
                  '<input type="text" class="form-control" id="project_path" value="' + currentProjectPath + '" disabled>';
              scan_vm.projectNameHTML = html;
              scan_vm.title = 'Scan: ' + formatProjectIdentifier([[${currentProjectIdentifier}]]);
              $('#modal_to_scan_project').modal('show');
          }
      }

      $('#enable_project_create_time').click(function () {
          let enable_custom_time = document.getElementById("enable_project_create_time").checked
          document.getElementById("project_create_time").value = "";
          document.getElementById("project_create_time").disabled = !enable_custom_time;
      })

      function scanProject(obj) {
          let projectPath = $('#project_path').val()
          let projectCreatTime = $('#project_create_time').val();
          let excludedPath = $('#excluded_path').val()
          let dependencyPath = $('#dependency_path').val()
          if (projectPath === "") {
              $('#project_path').addClass("is-invalid")
              return null;
          } else {
              $('#project_path').removeClass("is-invalid")
              $(obj).attr("disabled", "");
              $(obj).html('Scanning...');
              let i = 0;
              let scanningCounter = setInterval(function () {
                  $(obj).html("SCANNING..." + (++i));
              }, 1000);
              $.post("/operation/" + scanType, {
                  projectPath: projectPath,
                  projectCreatTime: projectCreatTime,
                  excludedPath: excludedPath,
                  dependencyPath: dependencyPath
              }, function (data) {
                  clearInterval(scanningCounter);
                  if (data === "success") {
                      window.location.href = '/dashboard/basic';
                  } else {
                      alert(data);
                      window.location.reload();
                  }
              })
          }
      }

      var vm_for_switch_project_model = new Vue({
          el: '#model_content_of_switching_project',
          data: {
              projectArray: new Map(),
              currentProject: '',
          },
      })

      $('#modal_to_switch_project').on('show.bs.modal', function (e) {
          $.get("/operation/search", function (data) {
              vm_for_switch_project_model.currentProject = data['currentProject'];
              let projectArray = [];
              for (identifier of data['projectList']) {
                  projectArray.push([identifier, formatProjectIdentifier(identifier, data['currentProject'])])
              }
              vm_for_switch_project_model.projectArray = projectArray;
          })
      })


      //将t4m#123456拆分，并添加样式
      function formatProjectIdentifier(projectIdentifier, currentProjectIdentifier) {
          let names = projectIdentifier.split("#");
          if (projectIdentifier === currentProjectIdentifier) {
              return names[0] + '<span class="text-muted">&nbsp;#' + names[1] +
                  '</span><span class="text-muted" style="float:right;">(current)</span>';
          } else {
              return names[0] + '<span class="text-muted">&nbsp;#' + names[1] + '</span>';
          }
      }

      function switchProject() {
          let targetProjectIdentifier = $('#model_content_of_switching_project > div > a.active').attr("name")
          let identifierArray = targetProjectIdentifier.split("#")
          $.get("/operation/switch?projectName=" + identifierArray[0] + "&projectId=" + identifierArray[1], function (data) {
              if (data === "success") {
                  window.location.reload();
              }
          })
      }

      function deleteProject() {
          let targetProjectIdentifier = $('#model_content_of_switching_project > div > a.active').attr("name")
          let identifierArray = targetProjectIdentifier.split("#")
          $.get("/operation/delete?projectName=" + identifierArray[0] + "&projectId=" + identifierArray[1], function
              (data) {
              if (data === "success") {
                  window.location.reload();
              }
          })
      }
	
	</script>
</imports>

</body>
</html>
